/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, InputLine, Input, Button, Layer, CheckSwitch, Popover, PopoverRefer,
    IconChevronDown, PopoverContent, PopoverDescription, MenuList, MenuItem, PopoverClose, IconX, useToast,
} from "customize-easy-ui-component";
import {
    InspectRecordLayout, InternalItemProps,  useItemInputControl,
} from "../common/base";
import queryString from "query-string";

interface Props  extends InternalItemProps{
    label?: string;
    titles?: any[];
    projects: any[];
}
//简易项目列表： 舍去俩个字段输入:检验结果 安全状况等级；
export const ProjectListNj=
    React.forwardRef((
        { children, show ,alone=true,label,projects}:Props,  ref
    ) => {
        //仅仅页面上用的路由hash字段 "ha": 不需要存储数据库给报告的。
        const VsProjects_configPure=projects.map(one=>{ const { ha, ...other}=one;
            return {...other} } );
        const toast = useToast();
        const getInpFilter = React.useCallback((par: any) => {
            //初始化的 Projects=空 -> 缺省值:要求挑选的大项目; 怎能增加，不允许删除和修改默认项目名字。
            const {Projects =VsProjects_configPure } =par||{};
            return {Projects};
        }, []);
        const {inp, setInp} = useItemInputControl({ ref });
        const qs= queryString.parse(window.location.search);
        // console.log("向目标表点击切换的 graphql入口from=" , qs?.from??'不晓得');
        const [viewHas, setViewHas] = React.useState<boolean>(false);
        const [seq, setSeq] = React.useState<number | null>(Number(qs?.from));   //表對象的當前一條。
        const [obj, setObj] = React.useState<any>();        //Projects数组的各个对象
        React.useEffect(() => {
            let size = inp?.Projects?.length;
            let ifrom = Number(qs?.from);
            if (ifrom >= 0 && ifrom < size) {
                setSeq(ifrom);    //导致初始化显示最后一个seq
                setObj(inp?.Projects?.[ifrom]);
            } else {
                setSeq(null);
                setObj(null);
            }
        }, [qs?.from ]);
        //这上面副作用：,inp?.Projects不能随意增加 依赖项哦，也不能用[qs])替代，qs会导致点击修改菜单后也会重复刷新的。【不要加】inp?.Projects依赖项，导致尾部插入的会跳到qs?.from那一条显示，不合理。
        function onModifySeq(idx:number,it:any){
            setObj(it);
            setSeq(idx);
        }
        function onDeleteSeq(idx:number,it:any){
            let fixSize =projects.length;
            if(idx<fixSize)  return;  //不允许删除
            inp?.Projects?.splice(idx,1);
            setInp({...inp,Projects: [...inp?.Projects] });
            setSeq(null);
        }
        function onInsertSeq(idx:number,it:any){
            let fixSize =projects.length;
            if(idx<fixSize)  return;    //不允许从默认项目列表中间插入自定义的东西
            inp?.Projects?.splice(idx,0, obj);
            setInp({...inp,Projects:[...inp?.Projects] });
            setSeq(idx);
        }
        function onAddSeq(idx:number){
            let size =inp?.Projects?.push(obj);
            setInp( (inp?.Projects&&{...inp,Projects:[...inp?.Projects] } )  || {...inp,Projects:[obj] } );
            //应该跳到最后一条：不能停留倒数第二条 当前from 当前按钮那条；
            setSeq((inp?.Projects&&(size-1))  || 0 );
        }
        const clearProjectCatalog = React.useCallback(() => {
            setInp({...inp, Projects:undefined });
            toast({title: "目录表被清空", subtitle: "需要重新设置!", intent: "warning"});
        }, [inp,setInp,toast]);
        //本对象组件：是共享的，状态交互注意。
        const editor=(fixed: boolean, tail: boolean) => <Layer elevation={"sm"} css={{ padding: '0.25rem' }}>
            <div>
                <InputLine label={`有做该项目吗:`}>
                    <CheckSwitch  checked= {obj?.do || false}
                                  onChange={e =>setObj({...obj, do: (obj?.do? undefined:true)} ) } />
                </InputLine>
                <InputLine label={`检验项目:`}>
                    <Input   value={obj?.name ||''}  disabled={fixed}
                             onChange={e =>setObj({...obj, name: e.currentTarget.value} ) } />
                </InputLine>
                { !obj?.na && <>
                    <InputLine label={`备注`}>
                        <Input   value={obj?.memo ||''}
                                 onChange={e =>setObj({...obj, memo: e.currentTarget.value} ) } />
                    </InputLine>
                    </>
                }
                目录页显示的自定义部分：
                <InputLine label={`页号`}>
                    <Input   value={obj?.page ||''}
                             onChange={e =>setObj({...obj, page: e.currentTarget.value} ) } />
                </InputLine>
                <Button onPress={() => {
                    if(seq !== null) {
                        inp?.Projects?.splice(seq, 1, obj);
                        setInp({ ...inp, Projects: [...inp?.Projects] });
                    }
                    else setInp({ ...inp, Projects: [...inp?.Projects ,obj] });
                } }
                >{tail? `新增一条` : `改一条就确认`}</Button>
            </div>
        </Layer>;
        //项目明细编辑器的显示：依赖Projects数组索引i来判定的。页面上名义的顺序序号不等于这个的，要转换？链接生成时刻就要敲定了。新增加的又删除导致序号跳变?【默认】项目不允许删除而且在前面。
        const myTable=<div>
            {inp?.Projects?.map((a:any,i:number)=>{
                if((viewHas && a?.do) || !viewHas)
                    return <React.Fragment  key={i}>
                        <div>{`${i+1}`}
                            <Popover>
                                <PopoverRefer>
                                    <Button  size="md" iconAfter={<IconChevronDown />} variant="ghost" css={{whiteSpace:'unset'}}>
                                        {`${a?.name||'？'} [${a?.do? '有做':'没做'}] `}
                                    </Button>
                                </PopoverRefer>
                                <PopoverContent>
                                    <PopoverDescription>
                                        <MenuList>
                                            <MenuItem onPress={()=>onModifySeq(i,a)}>修改</MenuItem>
                                            <MenuItem onPress={()=>onDeleteSeq(i,a)}>刪除这条</MenuItem>
                                            <MenuItem onPress={()=>onInsertSeq(i,a)}>插入一条</MenuItem>
                                            <MenuItem onPress={()=>onAddSeq(i)}>末尾新增一条</MenuItem>
                                        </MenuList>
                                    </PopoverDescription>
                                    <PopoverClose>
                                        <IconX/>
                                    </PopoverClose>
                                </PopoverContent>
                            </Popover>
                        </div>
                        {i===seq && editor(i<projects.length, false) }
                    </React.Fragment>;
                else return null;
            }) }
        </div>;
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={label??'承压类检验报告附页-包括的项目（分项）'} column={0}>
                <Text  variant="h5">
                 {label??'报告（分项）'}-包括的项目：
                </Text>
                <Button intent='primary' onPress={() => setViewHas(!viewHas)}
                >{viewHas? `显示全部项目`: `仅显示有做的项目`}</Button>
                默认项目表的部分不能删除，不能改名字;
                <hr/>
                {myTable}
                { seq===null && editor(false, true) }
                <Text  variant="h5">
                有些是不在附页中体现的但却在目录中有的其页号需设定。
                </Text>
                想清空所有项目（分项）和目录的配置（谨慎使用！）：
                <Button intent='danger' onPress={() => {
                    clearProjectCatalog();
                }}>重新初始化</Button>
            </InspectRecordLayout>
        );
    } );

